<template>
    <div class="PlayFooter"
         :style="{'background-color':Styles.backgroundColor,color:Styles.color,borderTop:'.03rem solid '+Styles.borderColors}">
        <div class="content">
            <div class="schedule">
                <div class="fasr-div" :style="{color:Styles.mode===2?'#999':Styles.iconColor}">{{startTime|Playtime}}
                </div>
                <div class="nth-div" ref="progressBar"
                     @touchstart="scheduleStart" @touchmove="scheduleMove"
                     @touchend="scheduleEnd"
                >
                    <p class="fasr-p"></p>
                    <p class="last-p" :style="{ width: Progress + '%',backgroundColor:Styles.iconColor}"></p>
                    <span class="schedule-span"
                          :style="{ left: Progress + '%',transform:'scale('+scale+')',backgroundColor:Styles.mode===2?'#4d4d4d':'#fff'}"><i
                            :style="{'background-color':Styles.mode===2?'#999':Styles.iconColor}"></i></span>
                </div>
                <div class="last-div" :style="{color:Styles.mode===2?'#999':Styles.iconColor}">{{endTime|Playtime}}
                </div>
            </div>
            <div class="Features">
                <div class="" @click="Click('fontsizeShow')">
                    <i class="iconfont icon-zitidaxiao" :style="{color:Styles.mode===2?'#999':Styles.iconColor}"></i>
                </div>
                <div class="" @click="Click('backgroundShow')">
                    <i class="iconfont icon-yuedubeijing1" :style="{color:Styles.mode===2?'#999':Styles.iconColor}"></i>
                </div>
                <div class="control" ref="control" @touchstart="isplayStart" @touchend="isplayEnd"
                     :style="{color:Styles.playBtnColor,backgroundColor:'rgba(255,255,255,.4)'}">
                    <span v-if="isload" :class="{'span-a':Styles.mode===1,'span-b':Styles.mode===2,'span-c':Styles.mode===3}"></span>
                    <i class="iconfont icon-zanting" v-if="ispay"></i>
                    <i class="iconfont icon-bofang" v-else></i>
                </div>
                <div class="" @click="Click('SpeedShow')">
                    <i class="iconfont icon-bofangsudu1" :style="{color:Styles.mode===2?'#999':Styles.iconColor}"></i>
                </div>
                <div class="" @click="Click('Modifyshow')">
                    <i class="iconfont icon-gengduo2" :style="{color:Styles.mode===2?'#999':Styles.iconColor}"></i>
                </div>
            </div>
        </div>
        <audio ref="audio" id="audio" :src="chapter_url" preload="auto" @timeupdate="state"></audio>
    </div>
</template>

<script>
    import $ from 'jquery'

    export default {
        name: "index",
        data: function () {
            return {
                startTime: 0,
                endTime: 0,
                scale: 1,
                speed: 28.6,
                Progress: 0,
                ispay: false,
                isload: false,
                isAndroid: !navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            }
        },
        props: ['chapter_url', 'Styles'],
        mounted: function () {
        },
        methods: {
            state: function (e) {
                let audio = e.target
                this.startTime = audio.currentTime
                this.endTime = audio.duration
                this.Progress = ((audio.currentTime / audio.duration) * 100)
                if (!audio.paused) {
                    var timeRanges = audio.buffered
                    var length = timeRanges.length - 1
                    if (!this.isAndroid && timeRanges.end(length) >= 50) {
                        this.isload = false
                    } else if (this.isAndroid && timeRanges.end(length) >= 2) {
                        this.isload = false
                    }
                    this.ispay = true
                } else {
                    this.ispay = false
                }
                var Time = this.$Mate.Playtime(this.startTime)
                // this.position()
                this.lrBox(Time)
            },
            lrBox: function (Time) {
                this.$emit('lrBox', Time)
            },
            isplayStart: function () {
                $(this.$refs.control).addClass('fangda')
            },
            isplayEnd: function () {
                setTimeout(() => {
                    $(this.$refs.control).removeClass('fangda')
                }, 200)

                let audio = this.$refs.audio
                if (!audio.paused) {
                    audio.pause()
                    this.ispay = false
                } else {
                    audio.play()
                    this.isload = true
                    this.ispay = true
                }
            },
            Click: function (str) {
                this.$emit(str)
            },
            Speed: function (obj) {
                let audio = this.$refs.audio
                audio.playbackRate = obj.Speed.toFixed(1)
                this.speed = obj.X
            },
            scheduleStart: function (e) {
                this.scale = 1.4
                this.$refs.audio.pause()
                let targetWidth = this.$refs.progressBar.offsetWidth
                this.$Mate.scheduleStart(e, this.Progress, targetWidth)
            },
            scheduleMove: function (e) {
                this.scale = 1.4
                this.Progress = this.$Mate.scheduleMove(e,)
            },
            scheduleEnd: function (e) {
                this.scale = 1
                let audio = this.$refs.audio
                audio.currentTime += this.$Mate.scheduleEnd(audio.duration)
                this.$refs.audio.play()
                // this.Plays()
            },
        }
    }
</script>

<style scoped>
    @import "./css/index.css";
</style>
